<template>
  <div id="app">
    <div class="top">
      <van-nav-bar
        title="附近宠物详情"
        left-arrow
        :border="false"
        @click-left="$router.go(-1)" />
    </div>

    <!--  -->
    <div class="cont">
      <!-- 轮播 -->

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="i in img" :key="i.uid">
          <img v-lazy="i" alt="" />
        </van-swipe-item>
      </van-swipe>

      <div class="cont2">
        <div class="title">
          <span class="button">{{ num.label }}</span
          ><span class="text">{{ num.title }}</span>
        </div>
        <!-- 种类 -->
        <div class="type">
          <span>种类:{{ num.type }}</span>
          <span>品种:{{ num.breed }}</span>
          <span>目前状态:{{ num.status }}</span>
        </div>
      </div>

      <div class="cont3">
        <p>详情</p>
        <p>{{ num.detail }}</p>
        <div class="cont4">
          <span class="sp1">地址</span>
          <span class="sp2"
            ><van-icon class="position" name="map-marked" />{{ num.site }}</span
          >
        </div>

        <div class="cont5">
          <span class="sp1">发布时间</span>
          <span class="sp2">{{ num.time }}</span>
        </div>

        <div class="cont6">
          <img src="@/assets/486eb79d653e76a8c112a017b4d5bb2.png" alt="" />
          <div class="span">
            <span>
              <van-icon
                @click="like"
                v-if="!icon"
                size="25px"
                name="good-job-o" />
              <van-icon
                class="btn2"
                @click="removeCollect"
                v-else
                size="25px"
                name="good-job" />
              <span ref="asd">{{ num.fnum }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllMessage, updateFanNum } from '@/api/home'
import { Toast } from 'vant'

export default {
  data() {
    return {
      mid: this.$route.params.mid,
      item: [],
      num: [],
      icon: false,
      img: '',
    }
  },
  methods: {
    // 获取宠物信息
    // 获取宠物信息
    async getAllMessage() {
      const data = await getAllMessage()
      this.item = data.data.message
      data.data.message.forEach(item => {
        if (item.mid == this.mid) {
          this.num.push(item)
        }
      })
      this.num = this.num[0]
      console.log('1111111111', this.num)
      console.log(this.num.imgname)
      // console.log(this.num.imgname.split(','))
      this.img = this.num.imgname.split(',')
      // console.log(this.img)
    },
    //获取点赞接口
    // 获取宠物信息
    async updateFanNum() {
      const data = await updateFanNum()
      this.item2 = data.data.message
    },

    like() {
      console.log('123', this.$refs.asd.innerHTML)
      // 添加收藏

      if (!this.icon) {
        this.$refs.asd.innerHTML = parseInt(this.$refs.asd.innerHTML) + 1
        updateFanNum({
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          title: this.num.title,
          mid: this.mid,
          fnum: this.$refs.asd.innerHTML,
        }).then(res => {
          console.log(res)
          if (res.data.status != 200) {
            this.icon = false
            return Toast.fail({ message: '点赞失败!' })
          }
          this.icon = true
          return Toast.success({ message: '点赞成功!' })
        })
      }
    },

    // 删除收藏
    removeCollect() {
      if (this.icon) {
        this.$refs.asd.innerHTML = parseInt(this.$refs.asd.innerHTML) - 1
        updateFanNum({
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          title: this.num.title,
          mid: this.mid,
          fnum: this.$refs.asd.innerHTML,
        }).then(res => {
          console.log(res)
          if (res.data.status != 200) {
            this.icon = true
            return Toast.fail({ message: 'err!' })
          }
          this.icon = false
          return Toast.fail({ message: '已取消点赞!' })
        })
      }
    },
  },
  mounted() {
    this.getAllMessage()
    this.updateFanNum()
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
.btn2 {
  color: red;
}
//轮播
.van-swipe {
  width: 340px;
  height: 300px;
  border-radius: 15px;
}
.van-swipe img {
  width: 340px;
  height: 300px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}

.cont {
  width: 340px;
  margin: auto;
  background-color: #f1f0f5;
}
.cont2 {
  background-color: white;
}
.title {
  padding: 20px 0;
  font-size: 17px;
  font-weight: bold;
}
.title .button {
  width: 50px;
  height: 25px;
  display: inline-block;
  background-color: #51b0a2;
  color: white;
  border-radius: 5px;
  line-height: 25px;
  text-align: center;
}
.title .text {
  margin-left: 7px;
  height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.type {
  font-size: 15px;
  color: #969696;
  padding: 0 0 10px 0;
}
.type span {
  letter-spacing: 2px;
}
.type span:nth-child(2) {
  padding: 0 10px;
}

.cont3 {
  margin-top: 10px;
  background-color: white;
  font-size: 17px;
  height: 150px;
  overflow: scroll;
}
.cont3 p {
  margin: 0;
}
.cont3 p:nth-child(1) {
  font-weight: bold;
  padding: 10px 0;
}
.cont3 p:nth-child(2) {
  font-size: 15px;
  color: #828080;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #dddcdf;
}
.sp1 {
  font-size: 17px;
  font-weight: bold;
  display: inline-block;
  padding: 15px 15px 15px 0;
}
.position {
  color: rgb(224, 108, 108);
  padding: 0 20px 0 0;
}
.sp2 {
  display: inline-block;
  font-size: 15px;
  color: #828080;
}
.cont4 {
  border-bottom: 1px solid #dddcdf;
}
.cont6 {
  display: flex;
  justify-content: space-between;
  background-color: white;
  height: 50px;
  color: #828080;
  font-size: 20px;
  position: absolute;
  bottom: 30px;
  width: 100%;
}
.cont6 img {
  padding: 0 100px 0 0;
  vertical-align: middle;
}
.span {
  margin: 0;
  display: inline-block;
  line-height: 50px;
  margin-right: 30px;
}
.xin2 {
  color: red;
}
.temp {
  color: red;
}
</style>
